<template>
  <div class="fixed-box">
    <div class="tabbar-box">
      <div class="tabbar">
        <div
          class="itembox"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tapTabbar(index, item)"
        >
          <div v-if="item.ispos" class="pos">
            <t-image
              class="img"
              :src="tabIndex === index ? item.active : item.url"
            ></t-image>
            <div class="hot bcolor-2"></div>
          </div>
          <div v-else>
            <div class="img-box">
              <t-image
                class="img"
                :src="tabIndex === index ? item.active : item.url"
              ></t-image>
            </div>

            <div class="text">{{ item.name }}</div>
            <div :class="`hot ${index === 3 ? 'bcolor-1' : ''}`"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
// import tab1 from "@/assets/tabbar/tab1.png"
// import tabActive1 from "@/assets/tabbar/tab1-1.png"
import tab1 from "@/assets/tabbar/index.png";
import tabActive1 from "@/assets/tabbar/index-active1.png";
import tab2 from "@/assets/tabbar/tab2.png";
import tabActive2 from "@/assets/tabbar/tab2-1.png";
import tab3 from "@/assets/tabbar/tab3.png";
import tabActive3 from "@/assets/tabbar/tab3-1.png";
import tab4 from "@/assets/tabbar/tab4.png";
import tabActive4 from "@/assets/tabbar/tab4-1.png";
import tab6 from "@/assets/index/icon-gift.png";
import tabActive6 from "@/assets/index/icon-gift.png";
import tab5 from "@/assets/tabbar/tab5.png";
import tabActive5 from "@/assets/tabbar/tab5-1.png";

const router = useRouter();
const route = useRoute();
const emits = defineEmits(["setTabIndex"]);
const tabIndex = ref(0);
const tabList = ref([
  {
    url: tab1,
    active: tabActive1,
    name: "漫画",
    routeName: "comic",
    ispos: false,
  },
  {
    url: tab2,
    active: tabActive2,
    name: "广场",
    routeName: "",
    ispos: false,
  },
  {
    url: tab6,
    active: tabActive6,
    name: "福利",
    routeName: "",
    ispos: true,
  },
  {
    url: tab4,
    active: tabActive4,
    name: "收藏",
    routeName: "favorite",
    ispos: false,
  },
  {
    url: tab5,
    active: tabActive5,
    name: "我的",
    routeName: "my",
    ispos: false,
  },
]);

// 点击
const tapTabbar = (index, item) => {
  // tabIndex.value = index;
  if (item.routeName) {
    router.push({ name: item.routeName });
  }
};

const syncTabIndexByRoute = () => {
  // 找到当前路由 name 对应的 tab 索引
  const matchedIndex = tabList.value.findIndex(
    (tab) => tab.routeName === route.name // 路由名与 tabList 的 routeName 匹配
  );
  // 若匹配到（避免路由名不存在的情况），更新 tabIndex
  if (matchedIndex !== -1) {
    tabIndex.value = matchedIndex;
  }
};

// 3. 初始化时同步一次（页面加载时就匹配当前路由的 tab 样式）
syncTabIndexByRoute();

// 4. 监听路由变化，每次路由切换后重新同步 tabIndex
watch(
  () => route.name, // 监听路由的 name 变化
  () => {
    syncTabIndexByRoute(); // 路由变化后重新匹配 tabIndex
  },
  { immediate: true } // 立即执行（确保初始化时也触发）
);
</script>

<style lang="scss" scoped>
.fixed-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  background: #fff;
  .tabbar-box {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .tabbar {
    border-radius: 50px;
    border: 1px solid #e5e5e5;
    padding: 8px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .itembox {
    position: relative;
    flex: 1;
    .pos {
      position: absolute;
      top: -50px;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 70px;
        height: 70px;
        display: block;
      }
    }
    .img-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .img {
      width: 25px;
      height: 25px;
    }

    .text {
      font-size: 14px;
      line-height: 1;
      margin-top: 3px;
      font-weight: 500;
      text-align: center;
    }
    .hot {
      position: absolute;
      top: 0;
      right: 8px;
      padding: 6px;
      border-radius: 50%;
    }
    .bcolor-1 {
      background-color: #20e13d;
    }
    .bcolor-2 {
      background-color: #ff5959;
    }
  }
}
</style>
